<template>
  <div id="wrapper">

    <div class="cart-index">
      <div class="cart-index-wrap">
        <div class="cart-list">
          <ul>
            <li class="item" v-for="cart in carts">
              <div class="ui-box">
                <div class="imgProduct"><a href=""><img
                  :src="cart.product.thumb"></a></div>
                <div class="info ui-box-flex">
                  <div class="name">
                    <span>{{cart.product.name}}</span>
                  </div>
                  <div class="price">
                    <p>
                      <span>售价：</span><span>{{cart.product.price}}元</span>
                      <span>合计：</span><span>{{cart.product.price * cart.num}}元</span>
                    </p>
                    <div class="tip">
                      <span style="display: none;">请于2016/04/11 00:58前下单，逾期将失效。</span>
                    </div>
                  </div>
                  <div class="num">
                    <div class="xm-input-number">
                      <div v-bind:class="{ active: cart.num > 1}" class="input-sub" v-on:click="subNum(cart)"></div>
                      <div class="input-num"><span>{{cart.num}}</span></div>
                      <div class="input-add active" v-on:click="addNum(cart)"></div>
                    </div>
                    <div class="delete">
                      <a href="javascript:;" v-on:click="destroy(cart)">
                        <span class="icon-iconfontshanchu"></span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="append"></div>
            </li>

          </ul>
        </div>
        <div class="pointBox">
          <div class="point" style="display: none;"><span class="act act_special">包邮</span><span></span></div>
          <div class="point">
            <p>温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</p>
          </div>
        </div>

        <!-- Navbar -->
        <div class="bottom-submit ui-box">
          <div class="price"><span>共{{count.num}}件 金额：</span><br><strong>{{count.total_price}}</strong><span>元</span>
          </div>
          <div class="btn"><a class="ui-button ui-button-disable"
                              href="javascript:;"><router-link :to="{name:'Category'}"><span>继续购物</span></router-link></a></div>
          <div class="btn"><a class="ui-button"
                              href="/1/#/order/checkout?address_type=common"><router-link :to="{name:'Check_out'}"><span>去结算</span></router-link></a></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'cart',
    data() {
      return {
        carts: [],
        count: {},
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let id = this.$route.params.id;
        this.axios.get(`/cart?token=${localStorage.token}`)
          .then((response) => {
            console.log(response.data);
            this.carts = response.data.carts;
            this.count = response.data.count;
          })

        // .catch((error)=>{
        //   console.log(error.response.data.error)
        // if(error.response.data.error=='token_invalid'){
        //     alert('非法登录')
        //   this.$router.push({name:'Login'})
        // }
        // })
      },
      subNum: function (cart) {
        let data = {
          cart_id: cart.id,
          type: 'inc'
        }
        this.axios.patch('/cart', data)
          .then((response) => {
            this.carts = response.data.carts;
            this.count = response.data.count;
          })
      },

      addNum: function (cart) {
        let data = {
          cart_id: cart.id,
          type: 'dec'
        }
        this.axios.patch('/cart', data)
          .then((response) => {
            this.carts = response.data.carts;
            this.count = response.data.count;
          })
      },
      destroy: function (cart) {
        let cart_id = cart.id
        this.axios.delete('/cart?cart_id=' + cart_id)
          .then((response) => {
            this.carts = response.data.carts;
            this.count = response.data.count;
          })
      }
    },
  }
</script>


